<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>威朗森系统门窗销售单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .header {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .remark {
            font-size: 14px;
            color: #555;
        }
        button{
            margin-top: 10px;
            width: 10%;
            height: 5%;
        }
    </style>
</head>
<body>
<a th:href="@{/sale}">返回上一页</a>
<div class="header">威朗森系统门窗销售单</div>
<table>
    <tr>
        <th>客户名称</th>
        <th>电话号码</th>
        <th>工程地址</th>
        <th>订单编号</th>
    </tr>
    <tr>
        <td th:text="${user.getName()}">客户名称</td>
        <td th:text="${user.getMobile()}">电话号码</td>
        <td th:text="${user.getAddress()}">工程地址</td>
        <td th:text="${sale.getId()}">订单编号</td>
    </tr>
</table>
<table>
    <tr>
        <th>序号</th>
        <th>品名</th>
        <th>厚度</th>
        <th>产地</th>
        <th>数量</th>
        <th>平方</th>
        <th>单价</th>
        <th>金额</th>
        <th>备注</th>
    </tr>
    <tr th:each="saleproduct : ${saleProductsList}">
        <td th:text="${saleproduct.id}">1</td>
        <td th:text="${saleproduct.products.name}">品名</td>
        <td th:text="${saleproduct.getProducts().getModel().getThickness()}">厚度</td>
        <td th:text="${saleproduct.getProducts().getAddress()}">产地</td>
        <td th:text="${saleproduct.getNumber()}">数量</td>
        <td th:text="${saleproduct.getProducts().getModel().getSize()}">平方</td>
        <td th:text="${saleproduct.getProducts().getPrice()}">单价</td>
        <td th:text="${saleproduct.getPrice()}">总价</td>
        <td th:text="${saleproduct.getRemark()}">备注</td>
    </tr>
</table>
<table>
    <tr>
        <th>收获单位</th>
        <th>日期</th>
        <th>合计金额</th>
    </tr>
    <tr>
        <td th:text="${user.getAddress()}">厦门</td>
        <td th:text="${sale.getCreateDate()}">2025-7-1</td>
        <td th:text="${sale.getPrice()}">000</td>
    </tr>
</table>
<div class="remark">备注信息</div>
<div class="remark">定金70%到位安排生产，安装完毕后支付尾款</div>
<p id="status"></p>
<button onclick="generateExcel()">生成 Excel 文件</button>

<script th:inline="javascript">
    window.onload = () => {
        for (let i = 0; i < saleProductsList.length; i++) {
            let saleProducts = saleProductsList[i]
            console.log(saleProducts?.products?.name)
            console.log(saleProducts?.products?.model?.thickness)
            console.log(saleProducts?.number)
            console.log(saleProducts?.products?.model?.size)
            console.log(saleProducts?.products?.price)
            console.log(saleProducts?.remark)
        }
    }
    const sale = [[${sale}]];
    const saleProductsList = [[${saleProductsList}]];
    const user = [[${user}]];
</script>

<script type="text/javascript" src="/js/classify/exceljs.min.js"></script>
<script type="text/javascript" src="/js/classify/FileSaver.min.js"></script>
<script type="text/javascript" src="/js/classify/generateExcel.js"></script>
</body>
</html>